<template>
  <div class="map-index br10" style="height: 100%">
    <el-tabs v-model="activeName">
      <el-tab-pane label="高德地图" name="first" />
      <el-tab-pane label="腾讯地图" name="second" />
      <el-tab-pane label="百度地图" name="third" />
      <gd-map v-if="activeName == 'first'" />
      <tx-map v-if="activeName == 'second'" />
      <bd-map v-if="activeName == 'third'" />
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import GdMap from './GdMap.vue'
import TxMap from './TxMap.vue'
import BdMap from './BdMap.vue'
import { ref } from 'vue'
const activeName = ref('first')
</script>

<style lang="scss" scoped>
.map-index {
  background-color: #fff;
  margin-right: 20px;
  padding: 10px;
  box-sizing: border-box;
}
.el-tabs {
  display: flex;
  flex-direction: column;
}
.el-tabs,
::v-deep .el-tabs__content {
  height: 100%;
}
</style>
